
{include file="common/head"}
  
<head>
<!-- 	<script src="/static/flatpickr/flatpickr.min.js"></script>
	<link rel="stylesheet" href="/static/flatpickr/flatpickr.min.css">  -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>


	<style>
		#search_box{
			line-height: 35px;border-radius: 20px;position: absolute;top: 5px;left: 10%;right:10%;border: 0;text-align: center;z-index: 10;opacity: 0.2;transition: 0.1s;
		}
		#search_btn{
			z-index: 11;position: absolute;right: 11%;top: 10px;border-radius: 50%;
		}

		.row{margin: 0;}
		#top{background-image: linear-gradient(to right,#C63927, #FA842B);border-bottom: 0 solid #000;z-index: 21;border:0;}
		.section{background-color: #fff;padding:6px;margin: 10px 0;box-shadow: 0 0 2px #666;}
		.section-title{color:#C63927;font-weight: bold;padding: 0 6px;font-size: 1.1rem;}
		.price{color:#C63927;font-size: 1.2rem;text-align: right;}
		.row div{padding: 0;}
		a{color: white;text-decoration: none;}
		.goods{padding: 0;display: flex;justify-content: space-around;flex-wrap: wrap;}
		.card{margin: 4px;border: 0px solid #ccc;flex-grow: 1;border-radius: 2px;box-shadow: 0 0 1px #333;}
	</style>	
</head>

<body style="background-image: linear-gradient(to right,#C63927, #FA842B);">
	
	<!-- 标题 -->
	<div id="top" class="row" class="text-center" >
		<div class="col-2"></div>
		<div class="col-8 text-center" >
			<span class="section-title" style="padding: 0;color:#f7f7f7;">{$sys.sys_name}</span>
			<input type="text" id="search_box" name="search_box" value="" />
			<button id="search_btn" type="button" class="btn btn-sm btn-light bi-search"></button>
		</div>
		<div class="col-2"></div>
	</div>

	<div style="height:50px;"></div>
	
	<!-- Swiper -->
	<div class="swiper-container" style="height:30%;max-width: 1200px">
	    <div class="swiper-wrapper">
	    	{foreach $sys['top_images'] as $i}
	        	<div class="swiper-slide">
	        		<img src="{$i}" style="width:100%;" />
	        	</div>
	    	{/foreach}

	    </div>
	    <!-- 如果需要分页器 -->
	    <div class="swiper-pagination"></div>
	</div>

	<div class="container-x" style="max-width: 1200px;margin:0 auto;">
	<!-- 内容 -->	
	<div id="content" >
		<!-- shop list -->
		<div class="section"  >
			<div class="row"  >
				<div class="col-6 section-title" >热门商家</div>
				<div class="col-6" style="text-align:right;">
					<span class="bi-chevron-right"></span>
				</div>
			</div>
			<div class="goods">
		    {foreach $shops as $kv}
			  <div class="card" style="width:15%;">
			    <div class="card-body" style="padding: 4px;">
			      <div class="text-primary" >
			      	<img src="{$kv['shop_img'][0]}" style="width:100%;overflow:hide;" />
			      	<div class="ellipsis">{$kv['name']}</div>
			      </div>

			    </div>
			  </div>
			  {/foreach}
			</div>
		</div>

		<!-- hots goods -->
		<div class="section">
			<div class="section-title">精品推荐</div>
			<div class=" goods" >
				{foreach $hots as $kv}
					<div class="card" style="width:42%;max-width:280px;" >
					<div class="card-body" >
						<img src="{$kv['image']}" style="width:100%;overflow:hide;" />
					  	<div class="text-primary ellipsis" >{$kv['name']}</div>
					  	<div>
					  		￥<c class="price">{$kv['price']}</c>
					  	</div>
					</div>
					</div>
				{/foreach}

			</div>
		</div>

	
		<!--其他链接 -->
		<div class="section" style="">
		</div>

		<div class="section" style="height:50px;margin-bottom: 50px;">
			<div class="text-center"> </div>
		</div>

		<div  style="height:50px;"></div>
			

	</div>


	<div id="mask">mask layer</div>
	


	<input type="hidden" value="{$sys.msg}" id="show_msg" />

	<!-- 底部栏 -->
 	{include file="common/bottom"}

	<div style="height: 50px;"></div>
	</div>


<script type="text/javascript">
  var mySwiper = new Swiper ('.swiper-container', {
    //direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    autoplay:true,
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    // navigation: {
    //   nextEl: '.swiper-button-next',
    //   prevEl: '.swiper-button-prev',
    // },
    
    // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })   

	$(document).ready(function(){
		$("#to_home").css({'background-image': 'linear-gradient(to top,#C63927, #FA842B)'});

		var msg=$("#show_msg").val().trim();
		//var msg2=$("#pwd_msg").val().trim();

	    //search events 
	    $("#search_box").on('focus',function(){
	    	$(this).css({"opacity":"1"});
	    })
	    $("#search_box").on('blur',function(){
	    	$(this).css({"opacity":"0.2"});
	    })
	    $("#search_btn").on('click',function(){
	    	if(!$("#search_box").val()){
	    		layer.msg("请输入搜索关键字(Please input keywords)!");
	    		$("#search_box").focus();
	    		return false;
	    	}
	    	var key = $("#search_box").val().trim();

	    	$(".card").hide().each(function(){
	    		if($(this).attr('gname').indexOf(key)>=0 || $(this).attr('gname2').indexOf(key)>=0 ){
	    			$(this).show();
	    		}
	    	})
	    })

		// if(msg || msg2){
		// 	layer.open({
		// 		title:'System message',
		// 		content:msg+"<br/>"+msg2
		// 	})
		// }

		$(".bi-app").on('click',function(){
			layer.open({
				title:'App download',
				content:"<img src='/upload/down.png' style='width:100%;border:3px solid #111;border-radius:6px;' />",
			})
		})

		$("#mask").on('click',function(){
			$(this).hide();
		})




	});
</script>
</body>
</html>